<template>
  <!-- 搜索结果 -->
  <div class="searchContainer container">
    <!-- 标题 -->
    <div class="title">
      <h1>“{{ routeKeyword }}”的搜索结果</h1>
    </div>
    <!-- 搜索框 -->
    <div class="searchInput">
      <el-input
        v-model="keyword"
        placeholder="搜索歌曲、歌手"
        @keyup.enter="handleSearch(keyword)"
        clearable
      />
      <search
        theme="outline"
        size="26"
        fill="#409EFF"
        class="iconfont pointer"
        style="margin-left: 10px"
        @click="handleSearch(keyword)"
      />
    </div>
    <SongList
      :songlist="result"
      :height="'630px'"
      :isLoading="listLoadingStatus"
    />
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <span class="count">搜索结果：{{ total }}条</span>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :small="false"
        :background="true"
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script name="Search" setup>
import { onMounted, reactive, ref } from 'vue';
import { Search } from '@icon-park/vue-next';
import SongList from '@/components/SongList.vue';
import { searchResult } from '@/api/search';
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
import { formatMilliseconds } from '@/utils/formatter';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();

let routeKeyword = ref(route.query.keyword);

let listLoadingStatus = ref(false); // 搜索列表加载状态

// 搜索
let keyword = ref('');
function handleSearch(k) {
  if (keyword.value.length < 1) {
    ElMessage({
      message: '搜索内容不能为空！',
      type: 'warning',
    });
    return;
  }
  router.push(`/search?keyword=${k}`);
  keyword.value = '';
}

// 搜索结果
let result = reactive([]);
let total = ref(0); // 搜索结果总数量
async function getSearchResult(keyword, limit = 50, offset = 0) {
  if (result.length > 0) result.splice(0);
  listLoadingStatus.value = true;
  const res = (await searchResult(keyword, limit, offset)).data.result;
  total.value = res.songCount;
  res.songs?.forEach((song) => {
    result.push({
      id: song.id,
      name: song.name,
      singers: song.artists,
      album: song.album.name,
      duration: formatMilliseconds(song.duration),
    });
  });
  listLoadingStatus.value = false;
}

// 分页
let currentPage = ref(1); // 当前页号
let pageSize = ref(50); // 每页数量
function handleCurrentChange(page) {
  getSearchResult(routeKeyword.value, pageSize.value, (page - 1) * 50);
}

function init() {
  getSearchResult(routeKeyword.value);
}

onBeforeRouteUpdate((to) => {
  routeKeyword.value = to.query.keyword;
  getSearchResult(to.query.keyword);
});

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.searchContainer {
  margin: 10px auto;
  height: 820px;
  background-color: #fff;
  border: 1px solid #eee;

  // 标题
  .title {
    width: 100%;
    height: 45px;
    line-height: 45px;

    h1 {
      font-size: 24px;
      color: $main-color;
    }
  }

  // 搜索框
  .searchInput {
    width: 380px;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

// 分页
.demo-pagination-block {
  width: 95%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px auto;

  .count {
    color: $main-color;
  }
}
</style>
